﻿
@{
    ViewData["Title"] = "地图轨迹分析";
    Layout = "_Layout_DisplayAll";
}

<br />
<br />
<div class="GPSTrackForm">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">请选择车辆</label>
                <div class="layui-input-inline">
                    <select name="vehicleselect" id="vehicleselect" lay-filter="vehicleselect" lay-verify="required" lay-search>
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">请选择时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="time" placeholder="开始 到 结束" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">请填写点数</label>
                <div class="layui-input-inline">
                    <input type="text" lay-verify="number" name="number" value="800" onblur="value=zhzs(this.value)" class="layui-input" />
                </div>
            </div>
        </div>
        <div class="layui-row ">
            <div id="mapwrapper" style="text-align:center">
                <button class="layui-btn" id="loadtrack">加载轨迹</button>
                <button class="layui-btn" id="deletetrack">删除轨迹</button>
                <button class="layui-btn" id="ruleropen">开启测距</button>
            </div>
        </div>
        <br />
        <div class="layui-row ">
            <div id="mapcontainer" style="width: 100%;height: 800px;"></div>

        </div>
    </div>
</div>


@section Scripts{
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=FFvnSXHMHaC0CQgTguKY17zkEwwfqjsP"></script>
    <script src="/MYJS/GPSConverttoBaidu.js"></script>
    <script src="/MYJS/DistanceTool_min.js"></script>
    <script>
        var user = "@ViewBag.User";
        function zhzs(value) {
            value = value.replace(/[^\d]/g, '').replace(/^0{1,}/g, '');
            if (value != '')
                value = parseFloat(value).toFixed(0);
            else
                value = parseFloat(0).toFixed(0);
            return value;
        }

        /* 百度地图API功能*/
        map = new BMap.Map("mapcontainer");
        map.centerAndZoom(new BMap.Point(121.472644, 31.231706), 12);
        map.enableScrollWheelZoom();
        var myDistanceToolObject = new BMapLib.DistanceTool(map, { lineStroke: 2 });
        document.getElementById('ruleropen').onclick = function () {
            myDistanceToolObject.open(); // 开启测距
        };
        layui.use(['element', 'layer', 'laydate', 'table', 'form'], function () {
            var element = layui.element;
            layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            var laydate = layui.laydate;
            var datevalue, startdate, enddate,vehicleselected;
            
            laydate.render({
                elem: '#time'
                , type: 'datetime'
                , range: '到'
                , format: 'yyyy-M-d H:m:s'
                , done: function (val, date, endDate) {
                    datevalue = val;
                    var startenddate = val.split("到");
                    startdate = startenddate[0];
                    enddate = startenddate[1];
                }
            });
            $.ajax({
                //请求方式
                type: "POST",
                //请求的媒体类型
                //contentType: "application/json;charset=UTF-8",
                //请求地址
                url: '@Url.Action("GetGPSVehicles", "GPSTrack")',
                //请求成功
                success: function (result) {

                    for (var i = 0; i < result.length; i++) {
                        var option = new Option(result[i], result[i]);
                        // option.setAttribute("disabled", "");
                        $('#vehicleselect').append(option);// 下拉菜单里添加元素
                    }
                    form.render("select");
                    //重新渲染 固定写法
                    // console.log(result);
                },

                //请求失败，包含具体的错误信息
                error: function (e) {
                    layer.msg(e);
                }
            });

            form.on('select(vehicleselect)', function (data) {
                // console.log(data.value);
                vehicleselected = data.value;
            });
            var oldallOverlay=[];
            $("#loadtrack").click(function () {

                if (datevalue != undefined && vehicleselected!=undefined) {
                    var index = layer.load();
                    var inputValue = $("input[name='number']").val();
                    // console.log(inputValue);
                    //轨迹
                    $.ajax({

                        type: "POST",
                        //请求的媒体类型
                        dataType: 'json',
                        //请求地址
                        url: '@Url.Action("GetTrack", "GPSTrack")',
                        data: {
                            startdate: startdate,
                            enddate: enddate,
                            vehicleid: vehicleselected,
                            gpspoints: inputValue
                        },
                        success: function (data) {
                            // console.log(data[0]);
                            if (data.length >1) {
                                var gpscount = data.length;
                                var myIcon;
                                var marker;
                                if (navigator.onLine) {
                                    myIcon = new BMap.Icon('/Pictures/car.png',
                                        new BMap.Size(52, 26), {
                                        anchor: new BMap.Size(27, 13)
                                    });
                                   
                                    var allPoint = [];
                                    var transPoint = [];
                                    var trackpoints = [];
                                    var callbackindex = 0;
                                    for (var i = 0; i < gpscount; i++) {
                                        var item = data[i];
                                        //获取除了最后一个数之前的所有gps点存储到allpoint
                                        if (i < gpscount - 1) {
                                            allPoint.push(new BMap.Point(item["lon"], item["lat"]));
                                        }
                                    }
                                    callback = function (xyResult) {
                                        for (var i = 0; i < xyResult.length; i++) {
                                            trackpoints.push(new BMap.Point(xyResult[i]["x"], xyResult[i]["y"]));
                                        }

                                        map.addOverlay(new BMap.Polyline(trackpoints, {
                                            strokeColor: "blue",
                                            strokeWeight: 5,
                                            strokeOpacity: 0.5
                                        }));
                                        callbackindex = callbackindex + 1;
                                        trackpoints.length = 0;
                                        // map.setViewport(trackpoints);
                                    }
                                    BMap.Convertor.transMore(allPoint, 0, callback);

                                 

                                }
                                layer.close(index);
                            }
                            else {
                                layer.msg("没有轨迹数据！");
                                layer.close(index);
                            }
                        }
                        , error: function (e) {
                            layer.msg(e);
                        }
                    });
                   
                }
                else {
                    //console.log("jieshu");
                    layer.msg("请先选择车辆和日期！！！");
                }
             
            });
            $("#deletetrack").click(function () {
                // var allOverlay = map.getOverlays();
                // console.log(allOverlay);
                // for (var i = 0; i < allOverlay.length; i++) {
                //     //轨迹图有z这个对象，存储的是画笔的参数
                //     if (allOverlay[i].z.mc === 5) {
                //         oldallOverlay.push(allOverlay[i]);
                //     }
                // }
                // console.log(oldallOverlay);
                // for (var i = 0; i < oldallOverlay.length; i++) {
                //     map.removeOverlay(oldallOverlay[i]);
                // }
                map.clearOverlays();
            });


        })


    </script>


}